import React, {Component} from 'react';

import './index.less';

import {
    base
} from 'nc-lightapp-front';

import language from '../../language';

const itemsCountPerPageList = [5, 10, 20, 50, 100];

const {
    NCPagination,
    NCSelect
} = base;

const {NCOption} = NCSelect;

class Pagination extends Component {
    constructor(props) {
        super(props);

        this.changePage = this.changePage.bind(this);
        this.renderPageList = this.renderPageList.bind(this);
        this.changeCountPerPage = this.changeCountPerPage.bind(this);
    }

    changePage(page) {
        this.props.changePage && this.props.changePage(page);
    }

    changeCountPerPage(value) {
        this.props.changePageSize && this.props.changePageSize(value);
    }

    renderPageList() {
        let list = [];

        itemsCountPerPageList.map((item) => {
            list.push(
                <NCOption
                    value={item}
                >
                    {item}{language['hi6007-000013']}/{language['hi6007-000014']}{/*条/页*/}
                </NCOption>
            );
        });
    
        return list;
    }

    render() {
        const {
            activePage,
            totalPage,
            pageSize,
            total
        } = this.props;

        return (
            <div className="pagination-wrapper">
                <span className="show-total-item">
                    <span className="pagination-select-list">
                        <NCSelect
                            value={pageSize}
                            onSelect={this.changeCountPerPage}
                            className="page-select"
                        >
                            {this.renderPageList()}
                        </NCSelect>
                    </span>
                    <span className="total-num">
                        {language['hi6007-000015']} {total} {language['hi6007-000013']}{/*共 条*/}
                    </span>
                </span>
                <NCPagination
                    items={totalPage}
                    activePage={activePage}
                    onSelect={this.changePage}
                    maxButtons={5}
                    ellipsis={true}
                    boundaryLinks={true}
                    prev={true}
                    next={true}
                    first={true}
                    last={true}
                />
            </div>
        );
        
    }
}

export default Pagination;
